<template>
  <view class="container">
    <div class="top-bg">
      <image class="img" src="/static/top-bg.png" mode="aspectFill"></image>
    </div>
    <div class="input-wrap" :class="[light]">
      <image class="scan-btn" src="../../static/扫码.png" mode="" @click="scan"></image>
      <input
        class="input"
        @focus="light = 'light'"
        @blur="light = ''"
        :value="iccid"
        @input="iccid = $event.detail.value"
        placeholder="SIM卡背面的20位ICCID号"
      />
    </div>

    <div class="tips">
      <div class="title">温馨提示</div>
      <div class="row">禁止高危边境地带漫游使用</div>
      <div class="row">仅支持公众号充值使用，其他任何形式充值均无效</div>
      <div class="row">ICCID号区分大小写，推荐使用微信扫一扫</div>
    </div>

    <button class="btn" type="primary" @click="findCard">充值激活</button>
  </view>
</template>

<script>
const wx = require('jweixin-module');
export default {
  data() {
    return {
      light: '',
      iccid: '',
    };
  },
  methods: {
    scan() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        success: (res) => {
          console.log(res);
          this.iccid = res.resultStr.split(',')[1]; // 当needResult 为 1 时，扫码返回的结果
        },
      });
    },
    async findCard() {
      const res = await this.$app.http('card/getInfo', {
        iccid: this.iccid,
      });
      if (res.data.id) {
        this.$app.goPage(`/pages/card/index?id=${res.data.id}`);
      } else {
        this.$app.toast('找不到卡片信息');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .top-bg {
    .img {
      width: 100%;
      height: 600rpx;
    }
  }

  .input-wrap {
    margin: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 10rpx;
    z-index: 1;
    position: relative;
    border: 1px solid #cecece;
    transition: all 0.3s;
    position: relative;

    .scan-btn {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .input {
      border-radius: 10rpx;
      padding: 10px 60px;
    }

    &.light {
      border: 1px solid $text-color-3;
    }
  }

  .btn {
    margin: 100rpx 40rpx 40rpx;
    padding: 10rpx;
    font-size: $font-l;
  }

  .tips {
    padding: 20rpx 40rpx;

    .title {
      font-size: $font-l;
      margin: 20rpx 10rpx;
      padding: 0rpx 20rpx;
      line-height: 1;
      font-weight: 700;
      border-left: 8rpx solid $text-color-3;
    }

    .row {
      padding: 5rpx 10rpx;
      color: $text-color-5;
    }
  }
}
</style>
